<template>
  <div class="nav">
    <img class="nav-logo" src="../../assets/pc/homepage-logo.png" />
    <div class="nav-list">
      <span @click="chooseNav(0)" :class="{active: currentIndex == 0}" >首页</span>
      <span @click="chooseNav(index+1)" :class="{active: currentIndex == index + 1}" v-for="(item, index) in info.nav" :key="index">{{ item.title }}</span>
    </div>
    <img class="nav-phone" src="../../assets/pc/homepage-phone.png" />
    <span class="phone">19975250396</span>
  </div>
</template>

<script setup>
import { onMounted,ref} from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
import {getData} from '../../hooks/homepage'
const route = useRoute();
const currentIndex1 = route.query.currentIndex;
defineProps({
  title: String
});

const info = ref({})
const currentIndex = ref(0)
const chooseNav = (index) =>{
  currentIndex.value = index;
  if(index == 1){
    // 三位一体
    router.push({ path: '/tabDeatilPc', query: { currentIndex: currentIndex.value, type: 1 } });
  }
  if(index == 2){
    // 强基计划
    router.push({ path: '/tabDeatilPc', query: { currentIndex: currentIndex.value, type: 2 } });
  }
  if(index == 3){
    // 浙江新高考
    router.push({ path: '/newTestPc', query: { currentIndex: currentIndex.value, type: 3 } });
  }
  if(index == 4){
    // 高职提前批
    router.push({ path: '/tabDeatilPc', query: { currentIndex: currentIndex.value, type: 4 } });
  }
   if(index == 5){
    // 企业介绍
    router.push({ path: '/companyPc', query: { currentIndex: currentIndex.value, type : 1 } });
  }

  if(index == 0){
    router.push({ path: '/homePagePc', query: { currentIndex: currentIndex.value } });
  }
}
onMounted(async () => {
  currentIndex.value = currentIndex1
  let navInfo = localStorage.getItem("navInfo")
  if(navInfo){
    info.value = JSON.parse(navInfo);
  }else{
    let {infoData} =await getData();
    info.value = infoData
    localStorage.setItem("navInfo",JSON.stringify(infoData));
  }
});
</script>

<style lang="less" scoped>
.nav {
  width: 100vw;
  height: 71Px;
  background: linear-gradient(140deg, #011a35 0%, #000000 100%);
  padding-top: 21Px;
  display: flex;
  align-items: center;
  justify-content: center;
  .nav-logo {
    width: 130Px;
    height: 40Px;
    margin-right: 119Px;
  }
  .nav-list {
   
    span {
      margin: 0 25Px;
      font-size: 20Px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      cursor: pointer;
       color: #959595;
    }
    .active {
      color: #fff;
    }
  }
  .nav-phone {
    width: 23Px;
    height: 23Px;
    margin-left: 70Px;
    margin-right: 25Px;
  }
  .phone {
    font-size: 20Px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 28Px;
  }
}
</style>
